<template>
	<view class="wrapper">
		<view class="main">
			<view class="">
				<view class="main-box">
					<view class="main-search">
						<uni-datetime-picker v-model="datetimerange" @change="handleDateChange" type="daterange" rangeSeparator="至" />
						<u-subsection key="subsection" @change="sectionChange" activeColor="#999" inactiveColor="#999" :list="dataList" :current="current"></u-subsection>
					</view>
				</view>
				<view class="main-list">
					<view class="main-list-total">总提现：{{ totalWthdrawal }}</view>
					<view class="main-list-item" v-for="(item, index) in list" :key="item.id">
						<view class="main-list-item-top">
							<view class="main-list-item-time">申请时间：{{ item.updatetime }}</view>
							<view class="main-list-item-status">
								{{ item.status_text }}
							</view>
						</view>
						<view class="main-list-item-amount">
							提现金额：
							<text>¥{{ item.amount }}</text>
						</view>
						<view class="main-list-item-msg">
							驳回原因：
							<text class="main-list-item-msg-text" v-if="item.rejected_msg">{{ item.rejected_msg }}</text>
							<text v-else>～</text>
						</view>
					</view>
				</view>
				<u-back-top :scroll-top="scrollTop"></u-back-top>
				<u-loadmore
					:status="loadStatus"
					:line="true"
					:loading-text="loadingText"
					:loadmore-text="loadmoreText"
					:nomore-text="nomoreText"
					:error-text="errorText"
					@click-error="retryLoad"
					v-if="list.length > 0"
				/>
			</view>
		</view>
	</view>
</template>

<script>
import { getDateRangeByType } from '@/utils/common.js';
import { purse } from '@/api';
import createPageScrollLoadMixin from '@/mixins/pageScrollLoadMixin';

export default {
	// 混入滚动加载逻辑
	mixins: [
		createPageScrollLoadMixin(
			purse.commissionWithdrawalLog, // 请求函数
			{
				list_rows: 20,
				resFormat: 1,
				// 为每行数据添加额外属性
				processRow: (row, index) => {
					return {
						time: row.createtime,
						...row,
						// 添加自定义属性
						isExpand: false,
						fold: row.product ? true : false
					};
				}
			}
		)
	],
	data() {
		return {
			datetimerange: [],
			dataList: [{ name: '本日' }, { name: '本周' }, { name: '本月' }],
			current: 0,
			defaultParams: {}
		};
	},
	computed: {
		totalWthdrawal() {
			let total = 0;
			this.list.forEach((v) => {
				total += Number(v.amount);
			});
			return total;
		}
	},
	mounted() {
		this.sectionChange(this.current, false);
	},
	methods: {
		chageQueryParams() {
			this.queryParams = {
				start_date: this.datetimerange[0] || '',
				end_date: this.datetimerange[1] || ''
			};
		},
		// 日期范围修改时触发
		handleDateChange(e) {
			this.datetimerange = e;
			this.chageQueryParams();
		},
		sectionChange(index, inspection = true) {
			console.log(index);
			if (inspection) {
				if (index === this.current) return;
			}
			this.current = index;
			switch (this.current) {
				case 0:
					this.datetimerange = getDateRangeByType('today');
					break;
				case 1:
					this.datetimerange = getDateRangeByType('week');
					break;
				case 2:
					this.datetimerange = getDateRangeByType('month');
					break;
			}
			this.chageQueryParams();
		}
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	padding-bottom: 0rpx;
}
.main {
	margin-top: 0rpx;
	&-box {
		background-color: #fff;
		padding: 30rpx;
	}
	&-search {
		display: flex;
		justify-content: space-between;
	}
	&-list {
		background: #fff;
		margin: 20rpx 30rpx 0;
		padding-bottom: 40rpx;
		&-total {
			padding: 26rpx 0 20rpx 23rpx;
			font-family: 'PingFang SC';
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
		&-item {
			padding: 20rpx 30rpx;
			border-bottom: 2rpx solid #f5f5f5;
			&-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			&-time {
				font-family: 'PingFang SC';
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
			&-status {
				font-family: 'PingFang SC';
				font-weight: 500;
				font-size: 26rpx;
				color: #ff4603;
			}
			&-amount{
				margin: 30rpx 0;
				font-family: 'PingFang SC';
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				text{
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}
			}
			&-msg{
				font-family: 'PingFang SC';
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				&-text{
					font-family: 'PingFang SC';
					font-weight: 500;
					font-size: 24rpx;
					color: #FF0000;
				}
			}
		}
	}
}
</style>
